<!--vue模板-->
<template>
  <div style="background-color: #fff">
    <!--咨询信息-->
    <div class="tip">咨询信息</div>
    <el-row>
      <el-col
        :span="4"
        style="
          text-align: right;
          height: 40px;
          line-height: 40px;
          padding-right: 10px;
        "
        >联系工程师:</el-col
      >
      <el-col :span="20"
        ><el-select
          v-model="data.saleId"
          placeholder="请选择"
          style="width: 300px"
          @change="chgsale"
        >
          <el-option
            v-for="item in saleoptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-col>
    </el-row>

    <el-row>
      <el-col
        :span="4"
        style="
          text-align: right;
          height: 40px;
          line-height: 40px;
          padding-right: 10px;
        "
        >询价类型:</el-col
      >
      <el-col :span="20">
        <el-radio-group v-model="data.type">
          <el-radio :value="1" size="large">询价单</el-radio>
          <el-radio :value="2" size="large">咨询单</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>

    <div class="tip">产品信息</div>
    <el-table :data="data.product" style="width: 100%">
      <el-table-column prop="picurl" label="产品图片" width="180" />
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="spec" label="产品型号" width="180" />
      <el-table-column prop="price" label="产品价格" width="180" />
      <el-table-column prop="num" label="需求数量" width="180">
        <template #default="{ row }">
          <el-input-number v-model="row.num" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" />
    </el-table>
    <el-button type="primary" @click="add">添加产品</el-button>

    <el-button type="primary" @click="save">保存</el-button>

    <!--选择产品-->
    <ChooseProduct
      ref="chooseProductRef"
      :visible="isShowChooseProduct"
      @close="isShowChooseProduct = false"
      @choose="chooseProduct"
    ></ChooseProduct>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import ChooseProduct from "@/views/product/ChooseProduct.vue";
import { ElMessage } from "element-plus";
import { getUser } from "@/utils/session.js";
import { saveEnquiry } from "@/api/enquiry.js";
import { useRouter } from "vue-router";
import { getCreateId } from "@/api/customer.js";
import { getEmpList } from "@/api/employee.js";
import { func } from "vue-types";
//是否显示选择产品
const isShowChooseProduct = ref(false);
const chooseProductRef = ref(null);
//工程师选项
const saleoptions = ref([]);
const data = ref({
  saleId: "",
  saler: "",
  mobile: "",
  type: 1,
  product: []
});
//获取路由实例
const router = useRouter();

//添加产品
function add() {
  isShowChooseProduct.value = true;
  chooseProductRef.value.clear();
}

//--选择产品--
function chooseProduct(rows) {
  console.log("rows>>>", rows);
  //遍历选择的产品 追加上去
  rows.forEach(el => {
    //遍历data.value.product  查看要添加的产品是否存在
    let flag = false; //默认不存在
    for (let i = 0, len = data.value.product.length; i < len; i++) {
      let p = data.value.product[i];
      if (el.id == p.id) {
        flag = true;
        break;
      }
    }
    if (!flag) {
      let tmp = {};
      tmp.num = 0;
      tmp.picurl = el.picurl;
      tmp.pid = el.id;
      tmp.price = el.price;
      tmp.productName = el.name;
      tmp.spec = el.spec;
      data.value.product.push(tmp);
    }
  });
}

//选择销售
function chgsale(v) {
  //遍历查找选择的销售
  for (let i = 0, len = saleoptions.value.length; i < len; i++) {
    let tmp = saleoptions.value[i];
    if (tmp.id == v) {
      data.value.saler = tmp.name;
      data.value.mobile = tmp.mobile;
      break;
    }
  }
}

async function save() {
  //判断是否选择 销售
  if (data.value.saleId == "") {
    ElMessage.warning("请选择销售");
    return;
  }

  if (data.value.product.length == 0) {
    ElMessage.warning("请选择产品");
    return;
  }
  //从登录信息中获取
  let user = getUser();
  console.log("user>>>", user);
  data.value.createUserId = user.id;
  data.value.customerName = user.name;
  console.log(">>>", data.value);

  let res = await saveEnquiry(data.value);
  if (res.code == 200) {
    ElMessage.success("保存成功");
    router.push({ path: "/enquiry/index" });
  }
}

async function init() {
  let user = await getUser();
  let createId = await getCreateId(user.id);
  let empList = await getEmpList();
  if (empList.code == 200) {
    saleoptions.value = empList.data;
  }

  saleoptions.value.forEach(item => {
    if (item.userId == createId.data) {
      data.value.saler = item.name;
    }
  });
}

onBeforeMount(() => {
  init();
});
//表格数据
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.tip {
  background-color: #eee;
  border: solid 1px #ddd;
  height: 40px;
  line-height: 40px;
}
</style>
